<template>
  <div>
    <div>
      <div style="background:#FFF;height:30px;line-height: 30px;padding:5px 15px;">
        <van-row>
          <van-col span="14">
            <span style="font-weight:bold;font-size:14px;color:#3D3D3D;">{{current_fight_group_tpl.title}}</span>
          </van-col>
          <van-col span="10" style="text-align:right;">
            <span style="color:#FF4040;font-size:16px;">￥{{current_fight_group_tpl.price/100}}</span>
          </van-col>
        </van-row>
      </div>
      <div style="background:#fff;border-top:1px solid #EAEAEA;">
        <div>
          <radio-group class="radio-group" @change="handleRadioChange">
            <div class='order-sum' @click="handleRadio(true)">
              <label class="radio-label">
                微信支付
                <radio value="wechat_pay" color="black" :checked="radioChecked" style="float:right;" />
              </label>
            </div>
            <div class='order-sum' @click="handleRadio(false)">
              <label class="radio-label">
                会员支付
                <radio value="card_pay" color="black" :checked="!radioChecked" style="float:right;" />
              </label>
            </div>
          </radio-group>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-row>
        <van-col span="14" >
          <div class="flex" style="background:#fff">
            <div style="color:#000;">实付款:<span style="color:red;">￥{{current_fight_group_tpl.price/100}}</span></div>
          </div>
        </van-col>
        <van-col span="10">
          <div class="flex" style="background:black;">
            <div class="buy-title" @click="handlePay()">立即支付</div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      radioChecked:true,
      group_tpl_id: 0,
      payType:'wechat_pay',
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'current_fight_group_tpl',
    ])
  },
  onLoad (options) {
    this.group_tpl_id = options.group_tpl_id
    this.payType = 'wechat_pay'
    this.radioChecked = true
  },
  methods: {
    ...mapActions([
      'getFightGroupTpl',
    ]),
    handleRadio(checked){
      this.radioChecked = checked
      if (checked) {
        this.payType = 'wechat_pay'
      }else {
        this.payType = 'card_pay'
      }
    },
    handlePay(){
      let fight_group = {
        fight_group_tpl_id: this.group_tpl_id,
        user_id: this.user.id,
        pay_method:this.payType,
        num: 1
      }
      if (this.payType == 'card_pay') { //会员支付
        if (this.user.balance < this.current_fight_group_tpl.price/100*fight_group.num) {
          wx.showToast({title: '会员卡余额不足！', icon: 'none'})
          return
        }
        api.createFightGroup(fight_group).then(result=>{
          if (result.code === 0) {
            wx.navigateTo({url:"/pages/activity/group/group_detail?fight_group_id="+result.data.fight_group_id})
          }
        })
      } else {//微信支付
        api.createFightGroup(fight_group).then(res=>{
          if (res.code === 0) {
              wx.requestPayment({
               'timeStamp': res.data.timeStamp,
               'nonceStr': res.data.nonceStr,
               'package': res.data.package,
               'signType': res.data.signType,
               'paySign': res.data.paySign,
               'success':function(result){
                  console.log('支付成功：',result)
                  wx.navigateTo({url:"/pages/activity/group/group_detail?fight_group_id="+res.data.fight_group_id})
               },
               'fail':function(result){
                  console.log('支付失败：',result)
               }
            })
          }
        })
      }
    }
  },
}
</script>

<style>
page{
  background: #F2F2F2;
}
radio{
  transform:scale(0.7);
}
.wrapper {
  height: 100%;
  padding-bottom: 50px;
  background: #EAEAEA;
}
.order-sum{
  height:30px;
  line-height: 30px;
  padding:5px 15px;
  font-size:15px;
  border-bottom: 1px solid #E3E3E3;
}
.pin-row {
  background:#FFF;
  border-bottom:1px solid #DBDBDB;
  padding-top: 5px;
}
.pin-font {
  font-size: 16px;
}
.pin-btn {
  width: 100px;
  height: 40px;
  background: #000;
  color: #FFF;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
}
.footer {
 position: fixed;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 50px;
 background-color: #eee;
 z-index: 9999;
}
.amount-title {
  font-size:14px;
  text-align:center;
  color:#FFF;
}
.buy-title {
  font-size:16px;
  text-align:center;
  color:#FFF;
}

.flex{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  width: 100%;
  height: 50px;
  margin:0 auto;
  color: #000;
}

</style>
